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DYNAMIC CONTEXTUAL HELPER USER INTERFACE 

FIELD OF THE INVENTION 

[01] Aspects of the present invention relate to visual design surfaces. More specifically, 
aspects of the present invention provide a visual design surface that includes icons 
representing configuration errors and that provide proposed solutions. 

BACKGROUND 

[02] Computer applications that include visual design surfaces are commonly used to generate 
artifacts such as computer code or to automate processes. On a visual design surface, 
these artifacts are typically represented by shapes. The shapes are placed on the visual 
design surface are often arranged in a particular order and connected together in a 
particular fashion to perform specific functions. Each of the shapes also typically 
includes configuration parameters that are set by the user. After the user lays out the 
pattern of shapes and sets the appropriate configuration parameters, the design is 
compiled. 

[03] During the compilation process errors are identified and presented to the user. For 
example, if a variable has not been initialized a compilation error identifying this error is 
presented to the user. There are several disadvantages in waiting to identify errors xmtil 
the compilation process. One disadvantage is that with large designs, it can be difficult 
for a user to remember the intended fimction or configuration of a artifact at a later time. 

[04] Systems that perform backgroimd compilation have been used to present errors to a user 
during the design process. Such systems typically list identified errors. The list of errors 
can be distracting to the user. Moreover, the user may realize that certain errors will be 
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created because of the order in which the design takes place and not wish to be distracted 
by a list of errors. 

[05] Therefore, there is a need in the art for systems and methods that present configuration 
errors to a user using a visual design surface such that the presentation method is 
inconspicuous and minimizes distractions to the user, 

BRIEF SUMMARY 

[06] Aspects of the present invention address one or more of the issues mentioned above, 
thereby providing a visual design surface that identifies configuration errors to a user in 
an inconspicuous manner to minimize distractions and interruptions in design workflow. 
Liconspicuous icons also provide a means for a user to look at a diagram and pinpoint 
errors. A plurality of shapes each represent different functions and have configuration 
parameters. As used herein, "configuration parameters" include characteristics of 
individual shapes, relative positioning of shapes, containment, connections between 
shapes and any other design parameters set by a user of a visual design surface. The 
configuration parameters are analyzed to determine configuration errors. When an error 
is identified, an error icon may be placed next to the shape. The user may select the icon 
and be presented with one or more proposed solutions. The configuration parameters are 
periodically checked and error icons are removed when configuration errors are no longer 
present. 

BRIEF DESCRIPTION OF THE DRAWINGS 

[07] Aspects of the present invention are described with respect to the accompanying figures, 
in which like reference numerals identify like elements, and in which: 
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[08] Figure 1 shows a functional block diagram of a conventional general-purpose computer 
system; 

[09] Figure 2 shows a visual design surface in accordance with an embodiment of the 
invention; 

[10] Figure 3 shows a configuration error system in accordance with an embodiment of the 
invention; 

[11] Figure 4 illustrates a method of evaluating configuration parameters and displaying 
proposed solutions in accordance with an embodiment of the invention; 

[12] Figures 5A illustrates an error icon, in accordance with an embodiment of the invention; 

[13] Figure 5B illustrates an error icon containing a drop down bar, in accordance with an 
embodiment of the invention; 

[14] Figure 5C shows two proposed solutions that are displayed to the user, in accordance 
with an embodiment of the invention; 

[15] Figure 6A illustrates an embodiment in which an error icon is placed next to a container 
shape, in accordance with an embodiment of the invention; and 

[16] Figure 6B illustrates an embodiment in which an error icon is placed next to a contained 
shape, in accordance with an embodiment of the invention. 

DETAILED DESCRIPTION 

Exemplary Operating Environment 

[17] Figure 1 is a functional block diagram of an example of a conventional general-purpose 
digital computing environment that can be used to implement a visual design surface in 
accordance with various aspects of the present invention. In Figxire 1, a computer 100 
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includes a processing unit 110, a system memory 120, and a system bus 130 that couples 
various system components including the system memory to the processing unit 110. The 
system bus 130 may be any of several types of bus structures including a memory bus or 
memory controller, a peripheral bus, and a local bus using any of a variety of bus 
architectures. The system memory 120 includes read only memory (ROM) 140 and 
random access memory (RAM) 150. 

[18] A basic input/output system 160 (BIOS), containing the basic routines that help to 
transfer information between elements within the computer 100, such as during start-up, 
is stored in the ROM 140. The computer 100 also includes a hard disk drive 170 for 
reading from and writing to a hard disk (not shown), a magnetic disk drive 180 for 
reading from or writing to a removable magnetic disk 190, and an optical disk drive 191 
for reading from or writing to a removable optical disk 192 such as a CD ROM or other 
optical media. The hard disk drive 170, magnetic disk drive 180, and optical disk drive 
191 are connected to the system bus 130 by a hard disk drive interface 192, a magnetic 
disk drive interface 193, and an optical disk drive interface 194, respectively. The drives 
and their associated computer-readable media provide nonvolatile storage of computer 
readable instructions, data structures, program modules and other data for the personal 
computer 100. It will be appreciated by those skilled in the art that other types of 
computer readable media that can store data that is accessible by a computer, such as 
magnetic cassettes, flash memory cards, digital video disks, BemouUi cartridges, random 
access memories (RAMs), read only memories (ROMs), and the like, may also be used in 
the example operating environment. 

[19] A number of program modules can be stored on the hard disk drive 170, magnetic disk 
190, optical disk 192, ROM 140 or RAM 150, including an operating system 195, one or 
more application programs 196, other program modules 197, and program data 198. A 
user can enter commands and information into the computer 100 through input devices 
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such as a keyboard 101 and pointing device 102. Other input devices (not shown) may 
include a microphone, joystick, game pad, satellite dish, scanner or the like. These and 
other input devices are often connected to the processing unit 110 through a serial port 
interface 106 that is coupled to the system bus, but may be connected by other interfaces, 
such as a parallel port, game port or a universal serial bus (USB). Further still, these 
devices may be coupled directly to the system bus 130 via an appropriate interface (not 
shown). A monitor 107 or other type of display device is also connected to the system 
bus 130 via an interface, such as a video adapter 108. In addition to the monitor, personal 
computers typically include other peripheral output devices (not shown), such as speakers 
and printers. 

[20] The computer 100 can operate in a networked environment using logical connections to 
one or more riemote computers, such as a remote computer 109. The remote computer 
109 can be a server, a router, a network PC, a peer device or other common network 
node, and typically includes many or all of the elements described above relative to the 
computer 100, although only a memory storage device 111 has been illustrated in Figure 
1. The logical connections depicted in Figure 1 include a local area network (LAN) 112 
and a wide area network (WAN) 113. Such networking environments are conunonplace 
in offices, enterprise- wide computer networks, intranets and the Intemet. 

[21] When used in a LAN networking environment, the computer 100 is connected to the 
local network 112 through a network interface or adapter 114. When used in a WAN 
networking environment, the personal computer 100 typically includes a modem 115 or 
other means for establishing a communications over the wide area network 113, such as 
the Intemet. The modem 115, which may be intemal or extemal, is connected to the 
system bus 130 via the serial port interface 106. In a networked environment, program 
modules depicted relative to the personal computer 100, or portions thereof, may be 
stored in the remote memory storage device. 
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[22] It will be appreciated that the network connections shown are illustrative and other 
techniques for establishing a communications link between the computers can be used. 
The existence of any of various well-known protocols such as TCP/IP, Ethernet, FTP, 
HTTP, Bluetooth, IEEE 802.1 Ix and the like is presumed, and the system can be 
operated in a client-server configuration to permit a user to retrieve web pages from a 
web-based server. Any of various conventional web browsers can be used to display and 
manipulate data on web pages. 

Description of Illustrative Embodiments 

[23] Figure 2 illustrates a visual design surface 200 in accordance with an embodiment of the 
invention. Design surface 200 may be a user interface that allows a user to interact with a 
design application, such as BizTalk Orchestration Designer™, and may be displayed on a 
display device, such as monitor 107. Design surface 200 may include a design section 
202 that includes several shapes selected by a user, such as shapes 204 and 206. Each 
shape is associated with a software artifact that performs a specific function. Shape 204, 
for example, may represent a software artifact for sending data to a port. A user may 
create apphcations by arranging and connecting a plurality of shapes in design section 
202. After a user completes the design of an application in design section 202, the 
application may then be compiled into an executable format in a conventional manner. In 
one embodiment, the apphcation is used to implement a distributed business process. 

[24] Design surface 200 may also include additional sections, such as a variable section 208 
that lists and defines variables and other data. A component section 210 may be included 
to display various shapes that may be used in design section 202. The user may add a 
shape to design area 202 by selecting and dragging the shape from component section 
210 to design section 202. 
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[25] Each shape in design section 202 includes one or more configuration parameters. As the 
user interacts with the design surface, configuration parameters are checked to ensure that 
they are in compliance with a predetermined set of rules. For example, send shape 204 
may include a configuration parameter for identifying a protocol to use when sending 
data to port shape 206. A rule may require the protocol configuration parameter of send 
shape 202 to match the protocol used by port shape 206. The predetermined set of rules 
may relate to the context in which a shape is being used. For example, a set of send rules 
may be used when a send/receive shape is used to send data. When the rule is violated, 
an inconspicuous icon, such as icon 212 may be displayed next to the shape to alert the 
user. 

[26] Figure 3 shows a configuration error system in accordance with an embodiment of the 
invention. As shown in Figure 3, configuration parameters for a first shape 302 and 
configuration parameters for a second shape 304 are evaluated by a configuration 
evaluation module 306. Two shapes are shown for illustration purposes only and with 
the understanding that configuration evaluation module 306 may analyze configuration 
parameters for several connected and/or unconnected shapes. Configuration evaluation 
module 306 may access a database of configuration rules 308. Configuration evaluation 
module 306 may transmit any configuration errors to an error module 310. Error module 
310 may access a conmion error database 312. Common error database 312 contains 
groups of errors under common errors. For example, when a required port is not 
connected, configuration evaluation module 306 may identify several errors in addition to 
an unconnected port error. Common error database 312 may include all of the errors 
under the common error of "port not connected." Error module 310 may use this 
information to determine a single error when related errors are detected. 

[27] Displaying a limited number of messages allows the user to quickly identify errors and 
correct them. In the example given above, assume that a required port not being 
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connected results in fifteen configuration errors that are all a result of the port not being 
connected. The design experience is improved when a user is presented with an 
abbreviated list of the most important proposed solutions rather than an exhaustive list of 
all proposed solutions. When presented with multiple proposed solutions, the user must 
first determine if there is an association between the proposed solutions or a common 
cause. As described above, error module 310 may be configured to perform this feature 
for the user. 

[28] Figure 4 illustrates a method of evaluating configuration parameters and displaying 
proposed solutions in accordance with an embodiment of the invention. First, in step 
402, shape configuration parameters are compared to configuration parameter rales. The 
shape configuration parameters may be for a single shape or multiple shapes. Next, it is 
determined whether at least one shape configuration parameter violates a configuration 
parameter mle in step 404. If no rales are violated, the process waits until the user 
changes or adds at least one shape configuration parameter in step 406. 

[29] When a configuration rale is yiolated, in step 408 an icon is displayed next to the relevant 
shape or shapes. Figure 5A illustrates a suitable inconspicuous error icon 502. Error 
icon 504, shown in Figure 5B, represents a rollover state of icon 502. When a cursor is 
positioned over icon 502, icon 502 is replaced with icon 504. Alternatively, icons may be 
activated with keyboard commands. One advantage of having two different states is to 
alert the user that there is an actionable behavior on the relevant shape. Displaying a 
drop down arrow alerts the user that a drop down menu will be displayed when the icon 
is selected. Error icons 502 and 504 may be placed at the edge of a shape to minimize 
interfering with the design. Similarly, the icons may be placed next to the relevant shape. 
In step 410 it is determined whether the user has selected the error icon. When the user 
selects the enor icon, in step 412 at least one proposed solution to the configuration error 
is displayed to the user. Figure 5C shows two proposed solutions 506 that are displayed 
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to the user. A proposed solution may include a dialogue box. The dialogue box may 
prompt the user to initialize a variable or set a configuration parameter. Of course text 
boxes, drop-down lists, buttons and other user interface controls may also be Of course 
text boxes, drop-down lists, buttons and other user interface controls may also be placed 
in the drop-down menu itself, avoiding the need to launch a dialog or wizard, and 
allowing the user to perform editing in place. Other proposed solutions include creating a 
new design element, adding or connecting a shape, etc. One skilled in the art will 
appreciate that numerous additional and alternative proposed solutions may be used. The 
proposed solutions may be a function of the context of the design. 

[30] When the user does not select the error icon, in step 414 it is determined whether the user 
has changed a configuration parameter. When no configuration parameters have been 
changed, control retums to step 406. When at least one configuration parameter has been 
changed, control retums to step 402. 

[31] The method shown in Figure 4 may be repeated periodically. As used herein, periodic is 
not limited to events that occur repeatedly after fixed periods of time. Configuration 
parameters may be evaluated when the user makes a change to one of the parameters. Of 
course, configuration parameters may also be evaluated after fixed periods of time, such 
as every 10 seconds, or when the design application finishes processing all actions in 
response to a user request and goes idle waiting for the next request. 

[32] One skilled in the art will appreciate that Figure 4 illustrates one exemplary method of 
evaluating configuration parameters and displaying proposed solutions. Aspects of the 
invention may be implemented with the steps shown in Figure 4 arranged in different 
orders or with alternative and/or substitute steps. 

[33] Aspects of the invention may also be used when one shape contains one or more other 
shapes ("nested shapes"). Figure 6A shows an embodiment in which an error icon 602 
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indicates that there is a configuration error with a container shape 604. A container shape 
contains one or more shapes. When a user expands container shape 604, the contained 
shapes are shown with an error icon next to the shape having a configuration error. 
Figure 6B shows an embodiment in which an error icon 606 is shown next to contained 
shape 608. 

[34] The present invention has been described in terms of preferred and exemplary 
embodiments thereof Numerous other embodiments, modifications and variations 
within the scope and spirit of the appended claims will occur to persons of ordinary skill 
in the art fi-om a review of this disclosure. 
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